import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback } from "react-native";
import  LinearGradient from 'react-native-linear-gradient';
import * as RootNavigation from '../../../App'

export default class SubmitOrder extends Component{
  constructor(props) {
    super(props);
  }

  goToAddressList(){
    RootNavigation.navigate('AddressList',{})
  }

  render(){
    return (
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <TouchableWithoutFeedback onPress={this.goToAddressList}>
          <View style={styles.section}>
            <Image style={styles.line} source={require('../../img/line.png')}></Image>
            <View style={styles.addressBox}>
              <View>
                <Text style={styles.address}>北京市西城区西单北大街131号</Text>
                <Text style={styles.name}>宋润生  180****5678</Text>
              </View>
              <Image style={styles.arrow} source={require('../../img/arrow_right_icon.png')}></Image>
            </View>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.goodBox}>
          <View style={[styles.flex,styles.bottomBorder]}>
            <Image style={{width:90,height:90,borderRadius:4}} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
            <View style={styles.goodInfo}>
              <Text style={styles.goodName}>采芝斋江苏苏州特产蛋黄花生 中华老字
                号旗舰店官网江苏特产 蛋黄花生220g</Text>
              <Text style={styles.num}>x1</Text>
            </View>
          </View>
          <View style={styles.scoreBox}>
            <Text style={styles.score}>2000积分</Text>
          </View>
        </View>
        <View style={styles.footer}>
          <Text style={{color:'#222222',fontSize:14}}>合计：<Text style={{color:'#E39354',fontSize:15,fontWeight:'500'}}>2000积分</Text></Text>
          <LinearGradient colors={['#e79c58','#f8da85']} start={{x:0,y:1}} style={styles.convert}>
            <Text style={styles.convertTitle}>立即兑换</Text>
          </LinearGradient>
        </View>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  section:{
    height:90,
    backgroundColor:'#fff',
    borderRadius:7,
    marginTop:10,
    marginHorizontal:10,
    paddingHorizontal:14
  },
  line:{
    height: 3,
    width:'100%'
  },
  addressBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    flex:1
  },
  arrow:{
    width: 6,
    height:11
  },
  address:{
    color:'#222222',
    fontSize:16,
    fontWeight:'500'
  },
  name:{
    marginTop: 13,
    fontSize:12,
    color:'#333333'
  },
  goodBox:{
    backgroundColor:'#fff',
    marginHorizontal: 10,
    marginTop:10,
    paddingHorizontal: 14,
    paddingTop:16
  },
  flex:{
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  goodInfo:{
    flex:1,
    marginLeft:11
  },
  goodName:{
    color:'#333333',
    fontSize:13
  },
  num:{
    color:'#B2B2B2',
    fontSize:13,
    marginTop:18
  },
  bottomBorder:{
    paddingBottom:15,
    borderBottomWidth:1,
    borderBottomStyle:'solid',
    borderBottomColor:'#F6F6F6'
  },
  scoreBox:{
    height:48,
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems: 'center'
  },
  score:{
    color:'#E39354',
    fontSize:15,
    fontWeight: '500'
  },
  footer:{
    position:'absolute',
    left:0,
    right:0,
    bottom:0,
    height:83,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-between',
    paddingTop:8,
    paddingHorizontal:15
  },
  convert:{
    height:36,
    width:98,
    borderRadius: 18
  },
  convertTitle:{
    flex:1,
    lineHeight:36,
    textAlign:'center',
    color:'#FFFFFF',
    fontSize:13,
    fontWeight:'600'
  }
})

